<template>
  <view class="card_rolls_item_box" :class="{ use: unUsed }">
    <view class="category">
      <image
        class="icon"
        src="https://www.lyzhnb.top/rxls-community/card.svg"
        mode="scaleToFill"
      />
      {{ getEnumValue(props.data.cardRollsCategory) }}
    </view>
    <view class="content">
      <view class="info">
        <view>{{ props.data.cardRollsMsg }}</view>
        <view class="time" :class="{ use_color: unUsed }">{{ timer }}</view>
      </view>
      <view class="price" :class="{ use_color: unUsed }">{{ price }}</view>

      <image
        class="state"
        :src="
          unUsed
            ? 'https://www.lyzhnb.top/rxls-community/un-use.svg'
            : 'https://www.lyzhnb.top/rxls-community/use.svg'
        "
        mode="scaleToFill"
      />
    </view>
    <view class="choose">
      <view
        class="item"
        :class="{ use_color: unUsed }"
        @click="isExplain = !isExplain"
      >
        <view>卡卷说明</view>
        <uni-icons
          type="down"
          :color="unUsed ? '#fff' : 'rgb(103, 97, 97)'"
          size="16"
        />
      </view>
      <view class="item" :class="{ use_color: unUsed }">
        <view>使用范围</view>
        <uni-icons
          type="right"
          :color="unUsed ? '#fff' : 'rgb(103, 97, 97)'"
          size="16"
        />
      </view>
    </view>
    <view v-if="isExplain" class="explain" :class="{ use_color: unUsed }">{{
      props.data.cardRollsExplain
    }}</view>
  </view>
</template>

<script lang="ts" setup>
import type { PageCardRollsByState } from '@/config/data/data'
import {
  CardRollsStateEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'
import format from '@/util/format'
import { computed, ref, type PropType } from 'vue'

//接受父组件参数
const props = defineProps({
  data: {
    type: Object as PropType<PageCardRollsByState>,
    default: {},
  },
})

//是否打开说明
const isExplain = ref(false)

//有效期
const timer = computed(() => {
  return `${props.data.startTime}至${props.data.endTime}有效`
})

//是否未使用
const unUsed = computed(() => {
  return checkStateEnum(props.data.cardRollsState, CardRollsStateEnum.UNUSER)
})

//金额
const price = computed(() => {
  let arr = props.data.cardRollsRule.split('-')
  if (arr.length < 1) {
    return `￥0.00`
  }
  return `￥${format.priceHandler(parseInt(arr[arr.length - 1]))}`
})
</script>

<style scoped lang="scss">
.card_rolls_item_box {
  position: relative;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background-color: rgba(235, 230, 230, 0.811);
  letter-spacing: 2rpx;

  .category {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 10rpx 10rpx;
    height: 30rpx;
    font-size: 28rpx;
    background-color: rgba(90, 88, 88, 0.404);
    border-top-left-radius: 10rpx;
    border-bottom-right-radius: 20rpx;
    color: #fff;

    .icon {
      width: 40rpx;
      padding-right: 5rpx;
    }
  }

  .content {
    padding: 26rpx;
    width: calc(100% - 52rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx dashed rgb(247, 244, 244);

    .info {
      font-weight: 700;

      .time {
        font-size: 26rpx;
        font-weight: 500;
        color: rgb(103, 97, 97);
        padding-top: 10rpx;
      }
    }
    .state {
      position: absolute;
      top: 0;
      right: 0;
      width: 100rpx;
      height: 100rpx;
    }

    .price {
      font-size: 50rpx;
      font-weight: 700;
      z-index: 2;
    }
  }

  .choose {
    padding: 20rpx 26rpx;
    width: calc(100% - 52rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    font-size: 28rpx;
    z-index: 2;

    .item {
      display: flex;
      align-items: center;
      color: rgb(103, 97, 97);
    }
  }

  .explain {
    padding: 0 0 26rpx 20rpx;
    width: calc(100% - 52rpx);
    font-size: 28rpx;
    color: rgb(103, 97, 97);
  }
}

.use_back {
  background-color: rgb(253, 200, 148) !important;
}
.use_color {
  color: #fff !important;
}

.use {
  color: #fff !important;
  background-color: rgb(252, 190, 127) !important;
}
</style>
